<template>
    <Row>
        <Col span="9">
        <span v-if="edit">{{name}}</span>
        <Input v-else v-model="name"></Input>
        </Col>
        <Col span="5">
        <span v-if="edit">{{money}}</span>
        <InputNumber v-else v-model="money"></InputNumber>
        </Col>
        <Col span="5">
        <span v-if="edit">{{month}}</span>
        <Select v-else v-model="month">
            <Option :value="item" v-for="item in 12" :key="item">{{ item }}</Option>
        </Select>
        </Col>
        <Col span="5">
        <Button v-if="edit" type="warning" size="small" @click="edit=false">编辑</Button>
        <Button v-else type="warning" size="small" @click="check()">保存</Button>
        <Button type="error" size="small" @click="delItem">删除</Button>
        </Col>
    </Row>
</template>

<script>
export default {
    name: "DynamicTableItem",
    data() {
        return {
            edit: true,
            name: '',
            money: 0,
            month: '',
        }
    },
    methods: {
        delItem() {
            this.$emit('del-item')
        },
        check() {
            this.edit = true
        }
    }
}
</script>

<style>
</style>